<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/core.css">
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/home.css">

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style>
        .m-button {
            padding: 0 0.24rem;
        }

        .btn-block {
            text-align: center;
            position: relative;
            border: none;
            pointer-events: auto;
            width: 100%;
            display: block;
            font-size: 1rem;
            height: 2.5rem;
            line-height: 2.5rem;
            margin-top: 0.5rem;
            border-radius: 3px;
        }

        .btn-primary {
            background-color: #04BE02;
            color: #FFF;
        }

        .btn-warning {
            background-color: #FFB400;
            color: #FFF;
        }

        .mask-black {
            background-color: rgba(0, 0, 0, 0.6);
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 999;
        }

        .m-actionsheet {
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: #fff;
            -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
        }

        .actionsheet-toggle {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .actionsheet-item {
            display: block;
            position: relative;
            font-size: 0.8rem;
            color: #555;
            height: 2rem;
            line-height: 2rem;
            background-color: #FFF;
        }

        .actionsheet-item:after {
            content: '';
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #D9D9D9;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }

        .actionsheet-action {
            display: block;
            margin-top: .15rem;
            font-size: 0.8rem;
            color: #555;
            width: 25px;
            height: 25px;
            background-image: url('');
            background-repeat: no-repeat;
            background-size: 25px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .aui-footer-product-action-list a {
            width: 100%;
        }
    </style>
</head>
<body>

<div id="app">
    <template>
        <div id="itemArray">
            <header class="aui-header-default aui-header-fixed ">
                <a href="javascript:history.back(-1)" class="aui-header-item">
                    <i class="aui-icon aui-icon-back"></i>
                </a>
                <div class="aui-header-center aui-header-center-clear">
                    <div class="aui-header-center-logo">
                        <div id="scrollSearchPro">
                            <span class="current">商品</span>
                            <span>评价</span>
                            <span>详情</span>
                        </div>
                    </div>
                </div>
                <a href="javascript:;" class="aui-header-item-icon select" style="min-width:0;">
                    <i class="aui-icon aui-icon-share-pd selectVal" onselectstart="return false"></i>
                    <div class="aui-header-drop-down selectList">
                        <div class="aui-header-drop-down-san"></div>
                        <div class="">
                            <p class="" onclick="location='http://www.a-ui.cn/'">消息</p>
                            <p class="" onclick="location='index.html'">首页</p>
                            <p class="" onclick="location='index.html'">帮助</p>
                            <p class="" onclick="location='index.html'">分享</p>
                        </div>
                    </div>
                </a>
            </header>
            <div class="aui-banner-content aui-fixed-top" data-aui-slider="">
                <div class="aui-banner-wrapper">
                    <div class="aui-banner-wrapper-item" th:each="img : ${imageList}">
                        <a href="javascript:;">
                            <img th:src="${img}">
                        </a>
                    </div>
                </div>
                <div class="aui-banner-pagination"></div>

            </div>
            <div class="aui-product-content">
                <div class="aui-real-price clearfix">
                    <span th:text="${'￥'+#numbers.formatDecimal(goods.costPrice/100,0,2)}"></span>
                    <del><span class="aui-font-num" th:text="${'￥'+#numbers.formatDecimal(goods.price/100,0,2)}"></span>
                    </del>
                    <div class="aui-settle-choice">
                        <span>抢购价</span>
                    </div>
                </div>
                <div class="aui-product-title">
                    <h2 th:text="${goods.title}"></h2>
                    <p th:text="${spu.caption}"></p>
                </div>
                <div class="aui-product-boutique clearfix">
                    <img src="../picture/icon-usa.png" alt="">
                    <span class="aui-product-tag-text" th:text="${sku.brandName}+'品牌'"></span>
                    <img src="../picture/icon-sj.png" alt="">
                    <span class="aui-product-tag-text">精选商家</span>
                </div>

                <div class="aui-product-coupon">
                    <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear"
                       data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                        <div class="aui-address-cell-bd">
                            已选
                        </div>
                        <div class="aui-address-cell-ft">
                            <i th:each="spec:${specMap}" th:text="${spec.value +'  '}"></i>
                        </div>
                    </a>

                    <!-- 弹窗A begin -->
                    <div class="m-actionsheet" id="actionSheet">
                        <div style="position:relative">
                            <div class="aui-spec-menu-top">
                                <div class="aui-spec-first-pic">
                                    <img src="../picture/pd-zf-1.jpg" alt="">
                                </div>
                                <div class="aui-spec-first-sif">
                                    <h2 th:text="${'￥'+#numbers.formatDecimal(goods.costPrice/100,0,2)}"></h2>
                                    <p th:text="${'重量 '+sku.weight+'g'}"></p>
                                    <p th:text="${'商品编号'+sku.id}"></p>
                                </div>
                            </div>
                            <div class="aui-product-text-content">
                                <div class="aui-product-text-content-list">
                                    <div class="aui-product-text-content-list-bd">
                                        <span>已选</span>
                                    </div>
                                    <div class="aui-product-text-content-list-ft">
                                        <i th:each="spec:${specMap}" th:text="${spec.value+'   '}"></i>
                                    </div>
                                </div>
                                <div class="aui-product-text-content-list" th:each="keyStr:${specMap.keySet()}">
                                    <div class="aui-product-text-content-list-bd">
                                        <span th:text="${keyStr}"></span>
                                    </div>
                                    <div class="aui-product-text-content-list-ft">
                                        <a href="javascript:;" class="aui-selected">
                                            <i th:text="${specMap.get(keyStr)}"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="aui-product-text-content-list">
                                    <div class="aui-product-text-content-list-bd">
                                        <span>数量</span>
                                    </div>
                                    <div class="aui-car-box-list-text-price">
                                        <div class="aui-car-box-list-text-arithmetic" style="position:inherit">
                                            <span class="num">1</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <a href="javascript:;" class="actionsheet-action" id="cancel"></a>
                            <div class="aui-product-function">
                                <a href="javascript:;" class="red-color" style="width: 100%"
                                   v-if="isSeckill==true && isOver==false" @click="toAddOrder">立即抢购</a>
                                <a href="javascript:;" style="width: 100% ;background:#81ff07;"
                                   v-if="isSeckill==false && isOver==false" v-text="'距离开始：'+seckillTime"></a>
                                <a href="javascript:;" style="width: 100% ;background:#555;" v-if="isOver">抢购结束</a>

                            </div>

                        </div>
                    </div>
                    <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                        <div class="aui-address-cell-bd">运费</div>
                        <div class="aui-address-cell-ft">免运费</div>
                    </a>
                    <a href="javascript:;" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                        <div class="aui-address-cell-bd">说明</div>
                        <div class="aui-address-cell-ft">假一赔十 7天无忧退货</div>
                    </a>
                </div>
                <div class="aui-dri"></div>
                <div class="aui-product-evaluate">
                    <a th:href="'/pingjia.html?skuId='+${sku.id}" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear">
                        <div class="aui-address-cell-bd">商品评价 <em>({{commentNum}})</em></div>
                        <div class="aui-address-cell-ft">
                            <span v-if="commentNum >0">好评 {{((starNum/commentNum)*20).toFixed(1)}}% </span>
                        </div>
                    </a>
                </div>
                </div>
                <div class="aui-dri"></div>
                <div class="aui-product-pages">
                    <div class="aui-product-pages-title">
                        <h2>图文详情</h2>
                    </div>
                    <div class="aui-product-pages-img" th:utext="${spu.introduction}">
                    </div>
                </div>
                <div class="aui-recommend">
                    <img src="../picture/icon-tj3.jpg" alt="">
                    <!--<h2>为你推荐</h2>-->
                </div>
                <section class="aui-list-product">
                    <div class="aui-list-product-box">
                        <a href="javascript:;" class="aui-list-product-item">
                            <div class="aui-list-product-item-img">
                                <img src="../picture/sf-15.jpg" alt="">
                            </div>
                            <div class="aui-list-product-item-text">
                                <h3>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽松套头毛衣针织衫</h3>
                                <div class="aui-list-product-mes-box">
                                    <div>
							<span class="aui-list-product-item-price">
								<em>¥</em>
								399.99
							</span>
								<span class="aui-list-product-item-del-price">
								¥495.65
							</span>
                                    </div>
                                    <div class="aui-comment">986评论</div>
                                </div>
                            </div>
                        </a>
                        <a href="javascript:;" class="aui-list-product-item">
                            <div class="aui-list-product-item-img">
                                <img src="../picture/sf-14.jpg" alt="">
                            </div>
                            <div class="aui-list-product-item-text">
                                <h3>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽松套头毛衣针织衫</h3>
                                <div class="aui-list-product-mes-box">
                                    <div>
							<span class="aui-list-product-item-price">
								<em>¥</em>
								399.99
							</span>
								<span class="aui-list-product-item-del-price">
								¥495.65
							</span>
                                    </div>
                                    <div class="aui-comment">986评论</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </section>
            </div>
            <footer class="aui-footer-product">
                <div class="aui-footer-product-fixed">
                    <div class="aui-footer-product-concern-cart">
                        <a href="/customerNotice.html?customer=customer">
                            <span class="aui-f-p-icon"><img src="../picture/icon-kf.png" alt=""></span>
                            <span class="aui-f-p-focus-info">客服</span>
                        </a>
                        <a @click="collection()" v-if="isCo == true">
                            <span class="aui-f-p-icon"><img src="../picture/icon-y-sc.png" alt=""></span>
                            <span class="aui-f-p-focus-info">已收藏</span>
                        </a>
                        <a @click="collection()" v-if="isCo == false">
                            <span class="aui-f-p-icon"><img src="../picture/icon-sc.png" alt=""></span>
                            <span class="aui-f-p-focus-info">收藏</span>
                        </a>
                        <a @click="focusOn()" v-if="isFo == true">
                            <span class="aui-f-p-icon"><img src="/image/icon_radio4.png" alt=""></span>
                            <span class="aui-f-p-focus-info">已关注</span>
                        </a>
                        <a @click="focusOn()" v-if="isFo == false">
                            <span class="aui-f-p-icon"><img src="/image/icon_radio3.png" alt=""></span>
                            <span class="aui-f-p-focus-info">关注</span>
                        </a>
                    </div>
                    <div class="aui-footer-product-action-list">
                        <a href="javascript:;" class="red-color" style="width: 100%"
                           v-if="isSeckill==true && isOver==false" @click="toAddOrder">立即抢购</a>
                        <a href="javascript:;" style="width: 100% ;background:#81ff07;"
                           v-if="isSeckill==false && isOver==false">距离开始：{{seckillTime}}</a>
                        <a href="javascript:;" style="width: 100% ;background:#555;" v-if="isOver">抢购结束</a>
                    </div>
                </div>
            </footer>
        </div>
    </template>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/aui.js"></script>
<script src="../js/aui-down.js"></script>
<script type="text/javascript" src="../js/city.js"></script>
<script type="text/javascript">
    /**
     * Javascript API调用Tab
     */
    !function ($) {
        let $tab = $('#J_Tab');

        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });

        /*
         $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
         console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
         });
         */

        $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });
    }(jQuery);
</script>
<script>
    /**
     * 默认调用
     */
    !function () {
        let $target = $('#J_Address');

        $target.citySelect();

        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });

        $target.on('done.ydui.cityselect', function (ret) {
            $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
    /**
     * 设置默认值
     */
    !function () {
        let $target = $('#J_Address2');

        $target.citySelect({
            provance: '新疆',
            city: '乌鲁木齐市',
            area: '天山区'
        });

        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });

        $target.on('done.ydui.cityselect', function (ret) {
            $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
</script>
<script type="text/javascript">
    $(function () {
        //绑定滚动条事件
        //绑定滚动条事件
        $(window).bind("scroll", function () {
            let sTop = $(window).scrollTop();
            let sTop = parseInt(sTop);
            if (sTop >= 100) {
                if (!$("#scrollSearchPro").is(":visible")) {
                    try {
                        $("#scrollSearchPro").slideDown();
                    } catch (e) {
                        $("#scrollSearchPro").show();
                    }
                }
            }
            else {
                if ($("#scrollSearchPro").is(":visible")) {
                    try {
                        $("#scrollSearchPro").slideUp();
                    } catch (e) {
                        $("#scrollSearchPro").hide();
                    }
                }
            }
        });
    })
</script>

<script>
    /**
     * Javascript API调用ActionSheet
     */
    !function ($) {
        let $myAs = $('#J_ActionSheet');

        $('#J_ShowActionSheet').on('click', function () {
            $myAs.actionSheet('open');
        });

        $('#J_Cancel').on('click', function () {
            $myAs.actionSheet('close');
        });

    }(jQuery);
</script>

<script src="/js/jquery.min.js"></script>
<script src="/js/aui.js"></script>
<script src="/js/aui-down.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/storage.js"></script>
<script th:inline="javascript">
    Vue.filter("dateFilter", function (date, formatPattern) {
        return moment(date).format(formatPattern || "YYYY-MM-DD HH:mm:ss");
    });
    let app = new Vue({
        el: "#app",
        data: {
            skuId: [[${goods.itemId}]],
            spuId: [[${goods.goodsId}]],
            goodsId: [[${goods.id}]],
            extName:[[${extName}]],
            categoryId:[[${goods.sku.categoryId}]],
            categoryName:[[${goods.sku.categoryName}]],
            isFo: false,
            isCo: false,
            comment: {},
            starNum: 0,
            goods: '',
            isSeckill: false,
            seckillTime: '00:00:00',
            isOver: false,
            commentNum:0
        },
        created(){
            this.getInfo();
            if (headersLocalStorage.token && headersLocalStorage.userId && headersLocalStorage.username){
                this.isCollection();
                this.isFocusOn();
            }
        },
        methods: {
            isCollection(){
                let _this = this;
                axios.get("/app/behavior/api/behavior/isCollect?spuId=" + _this.spuId,{headers: headersLocalStorage}).then(function (res) {
                    if(res.data.code == 10113){
                        _this.isCo = true;
                    }else{
                        _this.isCo = false;
                    }
                });
            },
            collection(){
                let _this = this;
                let params = {
                    "spuId":_this.spuId,
                    "categoryId":_this.categoryId,
                    "categoryName":_this.categoryName
                };
                axios.post("/app/behavior/api/behavior/collect",params,{headers: headersLocalStorage}).then(function (res) {
                    if(res.data.code == 1){
                        exception("/seckillHtml/"+_this.goodsId+".html")
                    }else{
                        _this.isCollection();
                    }
                }).catch(function (e) {
                   if (e.response.status == 401){
                       exception("/seckillHtml/"+_this.goodsId+".html")
                   }
                });
            },
            isFocusOn(){
                let _this = this;
                axios.get("/app/behavior/api/behavior/isFocus?skuId=" + _this.skuId,{headers: headersLocalStorage}).then(function (res) {
                    if(res.data.code == 10111){
                        _this.isFo = true;
                    }else{
                        _this.isFo = false;
                    }
                });
            },
            focusOn(){
                let _this = this;
                let params = {
                    "skuId":_this.skuId,
                    "categoryId":_this.categoryId,
                    "categoryName":_this.categoryName
                }
                axios.post("/app/behavior/api/behavior/focus",params,{headers: headersLocalStorage}).then(function (res) {
                    if(res.data.code == 1){
                        exception("/seckillHtml/"+_this.goodsId+".html")
                    }else{
                        _this.isFocusOn();
                    }
                }).catch(function (e) {
                    if (e.response.status == 401){
                        exception("/seckillHtml/"+_this.goodsId+".html")
                    }
                });
            },
            getCommentNum(skuId){
                let _this = this
                axios.get("/app/comment/api/comment/count?skuid=" + skuId).then(function (res) {
                    _this.commentNum = res.data.data;
                    if (_this.commentNum > 0) {
                        axios.post("/app/comment/api/comment/list",{"skuid":skuId}).then(function (res) {
                            _this.comment = res.data.data;
                            _this.starNum = 0;
                            if (_this.comment != null && _this.comment.length > 0){
                                for (let i = 0; i < _this.comment.length; i++) {
                                    _this.starNum += _this.comment[i].star;
                                }
                            }
                        });
                    }
                });
            },
            getInfo(){
                let _this = this;
                axios.post("/app/seckill/api/goods/one",{"id":_this.goodsId,"time":_this.extName}).then(function (res) {
                    _this.goods = res.data.data;
                    if (new Date(_this.goods.endTime).getTime() < new Date().getTime()) {
                        _this.isOver = true;
                    }
                    let seckillTimeSeconds = new Date(_this.goods.startTime).getTime() - new Date().getTime();
                    //倒计时操作
                    let timer = window.setInterval(function (args) {
                        seckillTimeSeconds = seckillTimeSeconds - 1000;
                        _this.seckillTime = _this.timedown(seckillTimeSeconds)
                        if (seckillTimeSeconds > 0) {
                            _this.isSeckill = false;
                        } else {
                            _this.isSeckill = true;
                            clearInterval(timer);
                        }
                    }, 1000);
                })
            },
            //将毫秒转换成时分秒
            timedown: function (num) {
                let oneSecond = 1000;
                let oneMinute = oneSecond * 60;
                let oneHour = oneMinute * 60
                //小时
                let hours = Math.floor(num / oneHour);
                //分钟
                let minutes = Math.floor((num % oneHour) / oneMinute);
                //秒
                let seconds = Math.floor((num % oneMinute) / oneSecond);
                //拼接时间格式
                let str = hours + ':' + minutes + ':' + seconds;
                return str;
            },
            toAddOrder(){
                let _this = this;
                exception("/seckill-order.html?time=" +_this.extName+"&id="+_this.goodsId)
            }
        }
    })
</script>
</body>
</html>